<template>
  <div class="apiLog-container">
    <el-card class="title" style="height: 60px">
      <span style="margin-right: 15px">接口日志</span>
      <el-button type="danger" :icon="Delete" circle size="small" plain text @click="toClear" />
    </el-card>
    <el-card :body-style="{ height: 'calc(100% - 200px)' }">
      <template #header>
        <div class="search">
          <div class="search-left" id="searchScrollable">
            <el-form-item label="调用者id" prop="userId">
              <el-input placeholder="调用者id" v-model.trim="SearchForm.userId"></el-input>
            </el-form-item>
            <el-form-item label="接口地址" prop="uri">
              <el-input placeholder="接口地址" v-model.trim="SearchForm.uri"></el-input>
            </el-form-item>
            <el-form-item label="请求IP" prop="">
              <el-input placeholder="请求IP" v-model.trim="SearchForm.requestIp"></el-input>
            </el-form-item>
            <el-form-item label="请求方式" prop="">
              <el-select v-model.trim="SearchForm.httpMethod" placeholder="请求方式" clearable>
                <el-option label="GET" value="GET"></el-option>
                <el-option label="POST" value="POST"></el-option>
                <el-option label="PUT" value="PUT"></el-option>
                <el-option label="DELETE" value="DELETE"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="search-right">
            <el-form-item>
              <el-button type="primary" @click="toSearch">搜索</el-button>
              <el-button @click="toReset">重置</el-button>
            </el-form-item>
          </div>
        </div>
      </template>
      <el-table size="large" :data="logList" stripe height="100%" highlight-current-row>
        <el-table-column prop="id" label="ID" width="100" />
        <el-table-column prop="userId" label="用户id" width="100" />
        <el-table-column prop="apiName" label="接口名称" width="250" show-overflow-tooltip />
        <el-table-column prop="uri" label="接口URI" width="200" show-overflow-tooltip />
        <el-table-column prop="httpMethod" label="请求方式" width="120">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-tag v-if="scope.row.httpMethod === 'GET'" type="success">GET</el-tag>
              <el-tag v-else-if="scope.row.httpMethod === 'POST'" type="primary">POST</el-tag>
              <el-tag v-else-if="scope.row.httpMethod === 'PUT'" type="warning">PUT</el-tag>
              <el-tag v-else type="danger">{{ scope.row.httpMethod }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="requestTime" label="请求时间" width="200" show-overflow-tooltip />
        <el-table-column prop="queryParams" label="查询参数" width="170" show-overflow-tooltip />
        <el-table-column prop="bodyParams" label="请求体" width="170" show-overflow-tooltip />
        <el-table-column prop="responseResult" label="响应结果" show-overflow-tooltip />
        <el-table-column prop="method" label="执行方法" width="170" show-overflow-tooltip />
        <el-table-column prop="requestIp" label="请求IP" width="200" show-overflow-tooltip />
        <el-table-column prop="cost" label="耗时" width="100" show-overflow-tooltip />
        <el-table-column prop="cost" label="操作" show-overflow-tooltip fixed="right">
          <template #default="scope">
            <el-button type="primary" link @click="lookUp(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="footer-content">
          <el-pagination
            background
            size="small"
            layout="total,  prev, pager, next,sizes, jumper"
            :total="total"
            v-model:current-page="pageNum"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30, 50]"
            @size-change="pageSizeChange"
            @current-change="pageNumChange"
          />
        </div>
      </template>
    </el-card>
    <!-- 查看接口信息 -->
    <el-drawer title="日志信息" show-close v-model="lookUpDrawer" @closed="lookUpClose" :size="700">
      <el-form label-width="auto">
        <el-form-item label="日志ID">
          <el-input v-model="currentLog.id" readonly> </el-input>
        </el-form-item>
        <el-form-item label="用户ID">
          <el-input v-model="currentLog.userId" readonly></el-input>
        </el-form-item>
        <el-form-item label="接口名称">
          <el-input v-model="currentLog.apiName" readonly></el-input>
        </el-form-item>
        <el-form-item label="接口URI">
          <el-input v-model="currentLog.uri" readonly></el-input>
        </el-form-item>
        <el-form-item label="请求方式">
          <template #default>
            <div style="display: flex; align-items: center">
              <el-tag v-if="currentLog.httpMethod === 'GET'" type="success">GET</el-tag>
              <el-tag v-else-if="currentLog.httpMethod === 'POST'" type="primary">POST</el-tag>
              <el-tag v-else-if="currentLog.httpMethod === 'PUT'" type="warning">PUT</el-tag>
              <el-tag v-else type="danger">{{ currentLog.httpMethod }}</el-tag>
            </div>
          </template>
        </el-form-item>
        <el-form-item label="执行方法">
          <el-input v-model="currentLog.method" readonly></el-input>
        </el-form-item>
        <el-form-item label="请求时间">
          <el-input v-model="currentLog.requestTime" readonly></el-input>
        </el-form-item>
        <el-form-item label="请求耗时">
          <el-input v-model="currentLog.cost" readonly></el-input>
        </el-form-item>
        <el-form-item label="请求IP">
          <el-input v-model="currentLog.requestIp" readonly></el-input>
        </el-form-item>
        <el-form-item label="查询参数">
          <el-input v-model="currentLog.queryParams" readonly type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="请求体" type="textarea">
          <el-input v-model="currentLog.bodyParams" readonly type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="响应结果">
          <vue-json-pretty :data="JSON.parse(currentLog.responseResult!)" />
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { Delete } from '@element-plus/icons-vue'
import VueJsonPretty from 'vue-json-pretty'
import 'vue-json-pretty/lib/styles.css'
import { getSysLogList, cleanLog } from '@/api/systemLog'

// 分页参数
const total = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
const logList = ref<SysLog[]>([])

function pageSizeChange() {
  toGetSysLogList()
}
function pageNumChange() {
  toGetSysLogList()
}

const SearchForm = ref<SysLog>({
  method: ''
})

// 获取列表
function toGetSysLogList() {
  getSysLogList(SearchForm.value, { pageSize: pageSize.value, pageNum: pageNum.value }).then(
    (res) => {
      if (res.code === 200) {
        logList.value = res.data?.list!
        total.value = res.data?.total!
      }
    }
  )
}

// 查询
function toSearch() {
  toGetSysLogList()
}

// 重置
function toReset() {
  pageNum.value = 1
  pageSize.value = 10
  SearchForm.value = {}
  toGetSysLogList()
}

const lookUpDrawer = ref(false)
const currentLog = ref<SysLog>({
  id: 0,
  uri: '',
  apiName: '',
  httpMethod: '',
  queryParams: '',
  bodyParams: '',
  responseResult: '',
  method: '',
  requestTime: '',
  requestIp: '',
  userId: '',
  cost: 0
})

// 点击查看
function lookUp(log: SysLog) {
  currentLog.value = log
  lookUpDrawer.value = true
}

// 信息关闭
function lookUpClose() {
  currentLog.value = {}
  lookUpDrawer.value = false
}

// 清空日志
function toClear() {
  ElMessageBox.confirm('清空日志', '确定要清空日志吗?', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  })
    .then(() => {
      cleanLog().then((res) => {
        if (res.code === 200) {
          ElMessage({
            message: '清空成功',
            type: 'success'
          })
          toReset()
        }
      })
    })
    .catch(() => {})
}

onMounted(() => {
  toGetSysLogList()
  const scrollable = window.document.getElementById('searchScrollable')
  scrollable?.addEventListener('wheel', function (event) {
    if (event.deltaY !== 0) {
      scrollable.scrollLeft += event.deltaY
      event.preventDefault()
    }
  })
})
</script>

<style lang="scss" scoped>
.apiLog-container {
  width: 100%;
  height: 100%;

  .title {
    margin-bottom: 13px;
    span {
      font-size: 16px;
      font-weight: 500;
    }
  }
  .el-card {
    height: calc(100% - 77px);
  }
  :deep(.el-card__footer) {
    border: none;
  }
  .footer-content {
    display: flex;
    align-items: center;
    justify-content: end;
  }

  .search {
    width: 100%;
    position: relative;
    top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;

    .search-left {
      width: 75%;
      display: flex;
      overflow-x: auto; /* 横向滚动 */
      white-space: nowrap;
      scrollbar-width: none; /* 适用于 Firefox */
      .el-form-item {
        min-width: 200px;
        margin-right: 10px;
        font-size: 15px;
      }
    }

    .search-right {
      min-width: 200px;
      width: 20%;
      background-color: #fff;
    }
  }

  .bLeft::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
  }
}
</style>
